<template>
  <div class="shadow">
    <div class="content">
      <i class="lt borderimg"><img src="../assets/drawable-hdpi/元素-边纹01.png" alt=""></i>
      <i class="rt borderimg"><img src="../assets/drawable-hdpi/元素-边纹01.png" alt=""></i>
      <i class="lb borderimg"><img src="../assets/drawable-hdpi/元素-边纹01.png" alt=""></i>
      <i class="rb borderimg"><img src="../assets/drawable-hdpi/元素-边纹01.png" alt=""></i>

      <p class="flex flex_end">
        <span class="closebtn el-icon-close"></span>
      </p>
      <!--支付宝or微信-->
      <div>
        <img src="../assets/zfb.png" alt="" class="logo" v-show="type === '02'">
        <img src="../assets/wxzf.png" alt="" class="logo" v-show=" type === '03'">
        <p class="title">欢迎使用<b class="bigfont" v-text="type === '02'?'支付宝':'微信'"></b>扫码付款</p>
        <div class="qrcodebox" v-html="qrcodesrc"></div>
        <p class="qrcode-text">
          <span>二维码有效时间</span>
          <span class="t1">{{qrcodeSeconds}}</span>
          <span>秒</span>
        </p>
        <p class="dotedline"></p>
        <img src="../assets/zflc.png" alt="" class="logo" v-show="type === '02'">
        <img src="../assets/wxlc.png" alt="" class="logo" v-show=" type === '03'">
      </div>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qr-image'
  import { commonAjax, ORG_ID, PLATFORM_PREFIX } from '../api/api.js'
  export default {
    data () {
      return {
        qrcodesrc: '',
        qrcodeSeconds: 60,
        qrtimer: null,
        querytimer: null,
        payResult: ''
      }
    },
    props: ['qrcodestr', 'type', 'outTradeNo', 'accountType'],
    mounted () {
      let self = this
      console.log('codestr=' + self.qrcodestr)
      this.qrcodesrc = QRCode.imageSync(self.qrcodestr, { type: 'svg' })
      console.log(this.qrcodesrc)
      this.qrtimer = setInterval(function () {
        self.qrcodeSeconds --
        if (self.qrcodeSeconds <= 0) {
          self.qrcodeSeconds = 0
          clearInterval(self.qrtimer)
          self.qrtimer = null
        }
      }, 1000)
      this.queryAliOrder()
    },
    watch: {
      'payResult' (val, oldval) {
        this.$emit('watchPayResult', val)
      }
    },
    methods: {
      queryAliOrder () {
        let i = 0
        const TIME_OUT = 60
        // 支付二维码超时时间（秒）
        const PER_TIME = 3
        // 轮询间隔（秒）
        let _this = this
        this.querytimer = setInterval(() => {
          i++
          commonAjax(
            [{orgId: ORG_ID, outTradeNo: _this.outTradeNo, accountType: _this.accountType}],
            `${PLATFORM_PREFIX}.payService`,
            'queryAliOrder').then(res => {
              if (res.data.body) {
                _this.payResult = 'success'
                clearInterval(_this.querytimer)
              } else if (i < (TIME_OUT / PER_TIME)) {
                console.log('checking order status...' + i)
              } else {
                clearInterval(_this.querytimer)
                _this.payResult = 'fail'
              }
            })
        }, PER_TIME * 1000)
      }
    }
  }
</script>

<style scoped>
  @import "../common/css/app.less";
  .shadow{
    background-color:rgba(0,0,0,0.2);
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
  }
  .content{
    width:400px;
    background-color:#FFFAF6;
    padding-bottom:10px;
    position:relative;
  }
  .logo{
    margin:10px auto;
    display:block;
    margin-bottom:10px;
  }
  .title{
    text-align: center;
  }
  .bigfont{
    font-size:16px;
    color:#AC4B1C;
  }
  .qrcodebox{
    width:200px;
    height:200px;
    border:5px solid #AC4B1C;
    border-radius: 10px;
    margin:20px auto;
  }
  .dotedline{
    height:1px;
    border-bottom:2px dotted #AC4B1C;
    width:260px;
    margin:0 auto;
  }
  .closebtn{
    color:#AC4B1C;
    padding:20px 20px 10px 0;
  }
  .borderimg{
    position:absolute;
  }
  .lt{
    top:5px;
    left:5px;
  }
  .rt{
    top:5px;
    right:5px;
  }
  .rt>img{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); 	/* IE 9 */
    -moz-transform:rotate(90deg); 	/* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg);
  }
  .lb{
    left:5px;
    bottom:5px;
  }
  .lb>img{
    transform:rotate(270deg);
    -ms-transform:rotate(270deg); 	/* IE 9 */
    -moz-transform:rotate(270deg); 	/* Firefox */
    -webkit-transform:rotate(270deg); /* Safari 和 Chrome */
    -o-transform:rotate(270deg);
  }
  .rb{
    right:5px;
    bottom:5px;
  }
  .rb>img{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); 	/* IE 9 */
    -moz-transform:rotate(180deg); 	/* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg);
  }
  .qrcode-text{
    text-align: center;
  }
</style>
